<template>
  <page-frame>
    <div class="member-checkin">
      <div class="toptitle">
        <div class="left">会员入住</div>
        <div class="right">
          <div class="btns">
            <el-button  @click="retreat" class="lightGreenBtn">办理入住</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row class="query">
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="currentFileId" clearable placeholder="请选择项目" @change="conditionChange">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item"   v-show="currentFileId=='1'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="loadTableData" placeholder="请选择会员姓名">
                </el-input>
              </div>

              <div class="input-item"   v-show="currentFileId=='3'">
                <el-date-picker
                  v-model="queryData.dateApplication"
                  type="daterange"
                  @change="loadTableData"
                  placeholder="请选择申请时间">
                </el-date-picker>
              </div>
              <div class="input-item"   v-show="currentFileId=='4'">
                <el-select v-model="queryData.taskKey" @change="loadTableData" placeholder="请选择办理进度">
                  <el-option
                    v-for="(key,val) in taskKeys"
                    :label="key"
                    :value="val">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="2">
                <el-button class="query lightGreenBtn" @click="loadTableData">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="getScheduleData"
            style="width: 100%">
            <el-table-column
              prop="memberName"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              prop="dateApplication"
              label="申请时间"
            >
            </el-table-column>
            <el-table-column
              prop="taskKey"
              label="办理进度"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="150"
            >
              <template scope="scope">
                <el-button type="text" v-if="scope.row.taskIdArr.length!=0" size="small" @click.stop="goOn(scope.row)">继续</el-button>
                <el-button type="text" v-if="scope.row.taskIdArr.length!=0" size="small" @click.stop="stopBtn(scope.row)">中止</el-button>
                <el-button type="text" size="small" @click.stop="remark(scope.row)">备注</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--备注弹框-->
          <el-dialog title="备注" :visible.sync="noteBox" size="tiny" :close-on-click-modal="false">
            <div class="input-item">
              <label style="vertical-align: top">备注内容:</label>
              <el-input v-model="comment" type="textarea" :rows="2" style="width: 80%!important;"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="noteBox = false">取 消</el-button>
              <el-button type="primary" @click="noteQuery">确 定</el-button>
            </span>
          </el-dialog>

          <!--入住办理进度表-->
          <el-dialog title="入住办理进度表" v-model="schedule" size="tiny" :close-on-click-modal="false">
            <el-steps :space="80" direction="vertical" :active="50">
              <el-step v-for="(key,value) in scheduleData" :title="value" :description="key"></el-step>
            </el-steps>
          </el-dialog>
          <!--&lt;!&ndash;终止进程&ndash;&gt;-->
          <!--<el-dialog title="中止进程" v-model="isStop"  size="tiny">-->
              <!--<div>确认中止入住点击「确认」后该用户入住流程将被中止且无法恢复</div>-->
          <!--</el-dialog>-->
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!--中止原因-->
      <el-dialog title="中止进程" :visible.sync="stopRefusal" size="tiny" :close-on-click-modal="false">
        <el-form>
          <el-form-item label="中止原因">
            <el-col :span="20">
              <el-input
                type="textarea"
                v-model="refuseReason"
                style="width:100%!important"
              >
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="stopRefusal = false">取 消</el-button>
          <el-button type="primary" @click="stop">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script>
  import checkInApi from '../../service/member/checkInApi';
  import commonApi from '../../service/member/commonApi';
  export default {
    data() {
      return {
        noteBox:false,
        comment:'',
        actId:null,
        schedule:false,
        scheduleData:{},
        currentFileId:1,
        currentMemberObj:{},
        stopRefusal:false,
        refuseReason: '',
        queryData:{
          "dateApplicationEnd": "",
          "dateApplicationStart": "",
          "dateApplication": "",
          "memberName": "",
          "taskKey": ""
        },
        fileList:[{
          fileId: 1,
          fileName: "会员姓名"
        },{
          fileId: 3,
          fileName: "申请时间",
        },{
          fileId: 4,
          fileName: "办理进度",
        }],
        tableData: [],
        taskKeys: {
          "inApply_servicePlan": "服务计划",
          "inApply_audit": "入住审核",
          "inApply_inApplyingFor": "入住申请",
          "inApply_affirm": "入住确认",
          "inApply_InAssessment": "入住评估",
          "inApply_bedAppointment": "床位预约",
          "inApply_examination": "体检报告"
        },
        total:0,
        currentPage:1
      }
    },
    methods: {
      init(){
        this.getTaskKeyList();
        this.loadTableData();
      },
      /**
       * 查询入住会员表格
       */
      loadTableData(){
        let self = this;
        if(self.queryData.dateApplication){
          self.queryData.dateApplicationStart = self.queryData.dateApplication[0];
          self.queryData.dateApplicationEnd = self.queryData.dateApplication[1];
        }
        self.queryData.actType = 0;
        checkInApi.getMemberTabs(10,self.currentPage,self.queryData).then(function(response){
          self.tableData = response.body.data.list;
          if(self.tableData.length > 0){
            self.tableData.forEach(function(row) {
              if(row.gender=="0"){
                row.sex = "男";
              }else {
                row.sex = "女";
              }
              if(row.dateApplication.length > 16){
                row.dateApplication = row.dateApplication.substring(0,16);
              }
              row.taskKey = '';
              if (row.taskNameArr.length > 0) {
                row.taskNameArr.forEach(function (key) {
                  row.taskKey += key+"/";
                });
              }
              if(row.taskKey){
                row.taskKey = row.taskKey.substring(0,row.taskKey.length-1);
              }
//              row.remark = '';
//              if (row.remarkArr.length > 0) {
//                row.remarkArr.forEach(function (key) {
//                  if(key){
//                    row.remark += key;
//                  }
//                });
//              }
            });
          }
          if(!response.data.data.total){
            self.total = 1;
          }else{
            self.total = response.body.data.total;
          }
        },function () {})
      },
      /**
       * 获取办理进度下来列表
       */
      getTaskKeyList(){
        let self = this;
        checkInApi.getTaskKeyList().then(
          function (response) {
           // self.taskKeys = response.body.data;
          }
        )
      },
      /**
       * 选择项目(清空筛选数据)
       */
      conditionChange(){
        let self = this;
        self.queryData.dateApplicationStart = null;
        self.queryData.dateApplicationStart = null;
        self.queryData.dateApplication = null;
        self.queryData.memberName = null;
        self.queryData.taskKey = null;
      },
      /**
       * 办理入住
       */
      retreat(){
        this.$router.push({name:"checkInProcess01",params:{memberId:0}});
      },
      /**
       * 继续
       */
      goOn(memberObj){
        switch (memberObj.taskKeyArr[0]){
          case "inApply_inApplyingFor":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_examination":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_InAssessment":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_servicePlan":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_bedAppointment":
            this.$router.push({name:"checkInProcess02",params:{memberObj:memberObj}});
            break;
          case "inApply_audit":
            this.$router.push({name:"checkInProcess03",params:{memberObj:memberObj}});
            break;
          case "inApply_affirm":
            this.$router.push({name:"checkInProcess04",params:{memberObj:memberObj}});
            break;
        };
      },
      /**
       * 中止
       */
      stopBtn(memberObj){
        this.currentMemberObj = {};
        this.currentMemberObj = memberObj;
        this.stopRefusal = true;
      },
      stop(){
        this.stopRefusal = false;
        commonApi.abortProcess(this.currentMemberObj.actId,this.refuseReason).then(response => {
          this.refuseReason="";
          if(response.data.status==200){
            this.$message({
              type: 'success',
              message: '终止成功!'
            });
            this.loadTableData();
          }else{
            this.$message({
              type: 'success',
              message: '终止失败!'
            })
          }
        })
      },
      /**
       * 备注(操作)
       */
      remark(row){
        let self = this;
        self.comment = row.remark;
        self.actId = row.actId;
        self.noteBox=true;
      },
      /**
       * 备注确认
       */
      noteQuery(){
        let self = this;
        commonApi.getRemark(self.actId,self.comment).then(
          (response)=>{
            self.$message({
              message: '添加备注成功',
              type: 'success'
            });
            self.noteBox=false;
            self.loadTableData();
          }
        );
      },
      /**
       * 获取会员的流程进度
       */
      getScheduleData(row){
        let self = this;
        self.schedule = true;
        commonApi.getMemberStepResult(row.actId).then(function (response) {
          self.data =  response.body.data;
          self.scheduleData = {};
          if(self.data.step){
            var keys = Object.keys(self.data.step);
            if(keys){
              keys.forEach(function(e){
                self.scheduleData[e.toString().substring(0,16).replace("T"," ")] = self.data.step[e];
              });
            }
          }
        })
      },
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },
    components:{

    },


  }
</script>
<style>
  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .scroll{
    height: calc(100vh - 122px);
    padding:0px 50px;
  }
  .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
</style>



